// @formatter:off
/* start 定制 element-ui 样式 */
.el-checkbox__label {
  padding-left: 4px;
}
:root {
  --color-primary: #366ef4;
  --color-success: #2ba471;
  --color-warning: #e37318;
  --color-danger: #d54941;
  --color-info: #909399;

  --vxe-ui-font-primary-color: var(--color-primary) !important;
}
body {
  font-family: PingFang SC,Microsoft YaHei,Arial Regular !important;
}

.vertical_menu {
  .el-submenu__title, .el-menu-item {
    height: 42px !important;
    line-height: 42px !important;
    margin: 4px 6px !important;
    border-radius: 8px !important;
    i {
      margin-bottom: 4px !important;
    }
  }

  .el-menu {
    .el-menu-item {
      padding-left: 49px !important;
    }
  }

  .el-menu-item.is-active {
    color: var(--color-primary) !important;
    background-color: #ebf1fe !important;
 }

  .el-submenu.is-active {
    .el-submenu__title, .el-submenu__title i {
      color: var(--color-primary) !important;
    }
  }

  .el-menu-item:hover, .el-submenu__title:hover {
    background-color: #f3f3f3 !important;
  }
}

.el-drawer__header{
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
  padding: 14px !important;
  font-size: 16px !important;
}
/* end 定制 element-ui 样式 */
.w-full {width: 100%;}
.w-4_5 {width: 80%;}
.w-3_4 {width: 75%;}
.w-1_2 {width: 50%;}
.w-1_3 {width: 33%;}
.w-1_4 {width: 25%;}

.h-full {height: 100%;}
.h-1_2 {height: 50%;}
.h-1_3 {height: 33%;}
.h-1_4 {height: 25%;}

.h-100vh{height: 100vh}

.my-tap {opacity: 0.88;background-color: #f1f1f1}

.nowrap {white-space: nowrap}

.hidden {display: none !important;}

.block {display: block !important;}

// color
.color-primary {color: var(--color-primary) !important;}
.color-success {color: var(--color-success) !important;}
.color-warning {color: var(--color-warning) !important;}
.color-danger {color: var(--color-danger) !important;}
.color-info {color: var(--color-info) !important;}

// flex 布局相关
.flex {display: flex !important;}
.flex-x {display: flex; flex-direction: row !important; width: 50/100}
.flex-y {display: flex; flex-direction: column !important;}
.justify-start {justify-content: flex-start;}
.justify-end  {justify-content: flex-end;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}
.justify-around {justify-content: space-around;}
.justify-evenly {justify-content: space-evenly;}
.items-start {align-items: flex-start;}
.items-end {align-items: flex-end;}
.items-center {align-items: center;}
.items-baseline	{align-items: baseline;}
.items-stretch {align-items: stretch;}
.flex-1 {flex: 1;}
.flex-wrap {flex-wrap: wrap;}
.flex-nowrap {flex-wrap: nowrap;}
.nowrap {white-space: nowrap;}
.flex-center {justify-content: center; align-items: center}

.bg-white {background-color: #fff;}
.bg-danger {background-color: var(--color-danger) !important;}
.bg-success {background-color: var(--color-success) !important;}
.bg-primary {background-color: var(--color-primary) !important;}
.bg-warning {background-color: var(--color-warning) !important;}
.bg-info {background-color: var(--color-info) !important;}

.border-b { border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;} // 下边框,线色
.border-none {border: none !important;}

.font-10 {font-size: 10px !important;}
.font-11 {font-size: 11px !important;}
.font-12 {font-size: 12px !important;}
.font-13 {font-size: 13px !important;}
.font-14 {font-size: 14px !important;}
.font-15 {font-size: 15px !important;}
.font-16 {font-size: 16px !important;}
.font-18 {font-size: 18px !important;}
.font-20 {font-size: 20px !important;}

.text-gray-500 {color: lighten(#909399, 20%) !important;}
.text-ellipsis {text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

// 生成单个方向space的混合
.space-single-direction-generator(@property, @direction, @size) {
    @{property}-@{direction}: (0.25em * @size) !important;
}

// 生成不同尺寸、不同方向的padding类名
.generate-space-classes(@simpleProperty, @property) {
  // 定义方向相关信息
  @directions: t, r, b, l, x, y;  // 方向缩写列表
  // 对应的CSS属性列表，按照顺序与方向缩写对应
  @direction-properties: top, right, bottom, left;

  // 循环尺寸
  .loop-sizes(@index: -16) when (@index <= 16) {

    // 循环方向
    .loop-directions(@i: 1) when (@i <= 4) {
      @direction-abbr: extract(@directions, @i);
      @direction-property: extract(@direction-properties, @i);

      // 生成类名并应用对应样式
      .@{simpleProperty}@{direction-abbr}-@{index} {
        .space-single-direction-generator(@property, @direction-property, @index);
      }

      .loop-directions((@i + 1));
    }

    .@{simpleProperty}x-@{index} {
      .space-single-direction-generator(@property, left, @index);
      .space-single-direction-generator(@property, right, @index);
    }
    .@{simpleProperty}y-@{index} {
      .space-single-direction-generator(@property, top, @index);
      .space-single-direction-generator(@property, bottom, @index);
    }

    .loop-directions();
    .loop-sizes((@index + 1));
  }

  .loop-sizes();
}

// 调用函数来生成padding、margin类
.generate-space-classes(m, margin);
.generate-space-classes(p, padding);

// 生成 gap1-16 的类名
.generate-gap-classes(@max: 16) {
  .loop-sizes(@index: 1) when (@index <= @max) {
    .gap-@{index} {
      gap: (0.25em * @index);
    }
    .loop-sizes((@index + 1));
  }
  .loop-sizes();
}

.generate-gap-classes();

.vxe-body--column {
  .el-switch__label * {
    font-size: 12px;
  }
}
/* 为table的操作列设置 outline 样式 */
.table-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  .divide {
    color: var(--color-info);
  }
  .el-badge__content {
    // background-color: var(--color-primary);
    height: 14px;
    line-height: 14px;
    font-size: 10px;
    margin-top: 1px;
    margin-left: 2px;
  }

  .el-button--primary.is-plain {
    background-color: #fff;
    color: var(--color-primary);
  }
  .el-button--success.is-plain {
    background-color: #fff;
    color: var(--color-success);
  }
  .el-button--danger.is-plain {
    background-color: #fff;
    color: var(--color-danger);
  }
  .el-button--info.is-plain {
    background-color: #fff;
    color: var(--color-info);
  }
  .el-button--warning.is-plain {
    background-color: #fff;
    color: var(--color-warning);
  }

  .el-button--primary.is-plain:hover, .el-button--primary.is-plain:active, .el-button--primary.is-plain:focus {
    background-color: var(--color-primary);
    color: #fff;
  }
  .el-button--success.is-plain:hover, .el-button--success.is-plain:active, .el-button--success.is-plain:focus {
    background-color: var(--color-success);
    color: #fff;
  }
  .el-button--danger.is-plain:hover, .el-button--danger.is-plain:active, .el-button--danger.is-plain:focus {
    background-color: var(--color-danger);
    color: #fff;
  }
  .el-button--info.is-plain:hover, .el-button--info.is-plain:active, .el-button--info.is-plain:focus {
    background-color: var(--color-info);
    color: #fff;
  }
  .el-button--warning.is-plain:hover, .el-button--warning.is-plain:active, .el-button--warning.is-plain:focus {
    background-color: var(--color-warning);
    color: #fff;
  }

  button {
    margin-left: 0px !important;
    padding: 6px 8px !important;

    span {
      margin-left: 0px !important;
    }
  }
}
